<template>
<!-- 饮料详情页 -->
  <div class="drink">
    <div class="title">
      {{obj.label ? obj.label : '没选到哦！'}}
    </div>
    <el-row>
      <el-col>
        <img v-if="obj.id" :src="getUrl" style="width:300px; height: 260px;"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data (){
    return {
    }
  },
  computed: {
    obj () {
      return this.$store.state.obj
    },
    getUrl () {
      try {
        return require(`@/assets/images/drink/${this.obj.id}.jpg`)
      } catch (e) {
        console.error('找不到该图片')
        return require('@/assets/images/no-data.jpg')
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="less">
.drink {
  .title {
    font-size:18px;
    font-weight: 700;
  }

}
</style>